<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>菜鸟教程(runoob.com)</title>
	<style>
		body {
			margin: 0;
		}
	</style>
</head>

<body>
	<canvas id="canvas" width="500" height="600"></canvas>

	<br/>
	<br/>
	<br/>
	<button onclick="play()">点我开始</button>
	<button onclick="getResult()">点我获取数据</button>




	<!-- <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> -->
	<script>

		const radius = 200
		const centerX = 200
		const centerY = 200

		document.getElementById('canvas').style['transform-origin'] = `${radius}px ${radius}px`


		function runRotate(deg) {
			document.getElementById('canvas').style['transform'] = 'rotate(' + deg + 'deg)'
			// }, 10);
		}

		const rewards = ['一袋垃圾','两袋垃圾','三袋垃圾','四袋垃圾','五袋垃圾','六袋垃圾','七袋垃圾','八袋垃圾',]

		let acceleration = 1 //初始速度
		let deg = 0 //现在角度

		function accelerate() {

			return new Promise((resolve, reject) => {

				function loop() {
					acceleration += 1
					deg += acceleration
					deg = deg % 360
					runRotate(deg)

					if (acceleration >= 50) {
						resolve()
					} else {
						setTimeout(loop, 100)
					}

				}

				loop()
			})
		}

		function keep_speed() {
			function loop() {
				deg += acceleration
				deg = deg % 360
				runRotate(deg)

				setTimeout(loop, 100)
			}

			loop()
		}


		function play() {
			accelerate().then(() => {
				console.log('加速终止')
			}).then(keep_speed())
		}

		function get_ctx(element_id) {
			const canvas = document.getElementById(element_id)
			if (canvas.getContext) {
				return canvas.getContext('2d')
			}
			return null
		}

		function is_null(obj) {
			return obj == null
		}

		const img = new Image()
		img.onload = draw_turntable
		img.src = './youqian.jpg'

		function draw_turntable() {
			const ctx = get_ctx('canvas')
			if (is_null(ctx)) {
				alert('您的浏览器不支持')
				return
			}

			//Init
			ctx.font = 'bold 30px serif'


			const pie_num = rewards.length
			const angle = Math.PI * 2 / pie_num
			ctx.translate(centerX, centerY)
			ctx.save()


			//Draw pie
			const textX = radius * (4 / 5) * Math.cos(angle / 2)
			const textY = radius * (4 / 5) * Math.sin(angle / 2)
			const picRadius = radius * (2 / 5) * Math.sin(angle / 2)

			for (let i = 0; i < pie_num; i++) {
				//画pie
				ctx.beginPath()
				ctx.moveTo(0, 0)
				ctx.arc(0, 0, radius, 0, angle)
				ctx.fillStyle = i % 2 == 0 ? '#ffb820' : '#ffcb3f'
				ctx.fill()

				//写字
				ctx.save()
				ctx.beginPath()
				ctx.translate(textX, textY)
				ctx.fillStyle = 'blue'
				ctx.rotate(angle / 2 + Math.PI / 2)
				//Calculate text offset X,Y
				const text = rewards[i]
				const mt = ctx.measureText(text)
				const textOffSetX = 0 - (mt.width / 2)
				ctx.fillText(text, textOffSetX, 0)
				ctx.restore()

				//画图片
				ctx.save()
				ctx.beginPath()
				ctx.rotate(angle / 2)
				ctx.translate(radius / 2, 0)
				ctx.rotate(Math.PI / 2)//垂直
				ctx.arc(0, 0, picRadius, 0, Math.PI * 2, false)
				// ctx.stroke()
				ctx.clip()
				ctx.drawImage(img, - picRadius, - picRadius, 2 * picRadius, 2 * picRadius)
				ctx.restore()



				ctx.rotate(angle)
			}



		}





	</script>
</body>

</html>